<template>
  <el-dialog
    v-model="dialogVisible"
    title="学校参赛信息"
    width="900"
    :before-close="handleClose"
  >
    <div>
      <el-row :gutter="10" style="margin-bottom: 20px">
        <el-col :span="3"
          ><div class="grid-content ep-bg-purple">
            <el-input
              v-model="iptlist.edu_sort"
              placeholder="教育局序号"
            /></div
        ></el-col>
        <el-col :span="3"
          ><div class="grid-content ep-bg-purple">
            <el-input
              v-model="iptlist.match_sort"
              placeholder="比赛序号"
            /></div
        ></el-col>
        <el-col :span="8"
          ><div class="grid-content ep-bg-purple">
            <el-input v-model="iptlist.school" placeholder="学校名称" /></div
        ></el-col>
        <el-col :span="8"
          ><div class="grid-content ep-bg-purple">
            <el-input v-model="iptlist.teacher" placeholder="指导教师" /></div
        ></el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="6"
          ><div class="grid-content ep-bg-purple">
            <el-input
              v-model="iptlist.student[0]"
              placeholder="学生姓名1"
            /></div
        ></el-col>
        <el-col :span="6"
          ><div class="grid-content ep-bg-purple">
            <el-input
              v-model="iptlist.student[1]"
              placeholder="学生姓名2"
            /></div
        ></el-col>
        <el-col :span="6"
          ><div class="grid-content ep-bg-purple">
            <el-input
              v-model="iptlist.student[2]"
              placeholder="学生姓名3"
            /></div
        ></el-col>
        <el-col :span="6"
          ><div class="grid-content ep-bg-purple">
            <el-input
              v-model="iptlist.student[3]"
              placeholder="学生姓名4"
            /></div
        ></el-col>
      </el-row>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="onSubmit"> 保存 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
let emit = defineEmits(["cancal", "onSubmit"]);
let dialogVisible = ref(true);
let iptlist = reactive({
  teacher: "",
  match_sort: "",
  edu_sort: "",
  school: "",
  student: ["", "", "", ""],
});
let handleClose = () => {
  dialogVisible.value = false;
  emit("cancal");
};

let onSubmit = () => {
  console.log(iptlist);
  emit("onSubmit", iptlist);
};
</script>

<style></style>
